<template>
  <div class="container">
    <video ref="bankVideo" loop class="bank_video" src="../assets/video/video_marketing_01.mp4" x5-playsinline webkit-playsinline="true" preload="auto" playsinline="true" width="100%" height="100%" ></video>
    <div class="swiper mySwiper" style="overflow: hidden">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background: transparent;z-index: 99;" ></div>
        <div class="swiper-slide"><img src="../assets/poster/bank_ceb_poster_04.jpg" style="width: 100%"></div>
        <div class="swiper-slide"><img src="../assets/poster/bank_ceb_poster_01.jpg" style="width: 100%"></div>
        <div class="swiper-slide"><img src="../assets/poster/bank_ceb_poster_02.jpg" style="width: 100%"></div>
        <div class="swiper-slide"><img src="../assets/poster/bank_ceb_poster_03.jpg" style="width: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/css/swiper.min.css'
    export default {
        name: "index",
      data () {
        return {
          indexSwiperListLength:5,
          bankVideoFlag:true
        }
      },
      mounted() {
        // if(this.getUrlParam('companyId')){
        //   sessionStorage.setItem('companyId',this.getUrlParam('companyId'))
        // }
        this.swiperConfig();
      },
      methods:{
        swiperConfig() {
          let that = this;
          // this.$store.state.openSwiper = false;
          var swiper = new Swiper(".mySwiper", {
            autoplay: {
              delay: 11000,
              stopOnLastSlide: false,
              disableOnInteraction: false,
            },
            loop: true,
            on: {
              slideChangeTransitionEnd: function () {
                const realIndex = (this.activeIndex - 1 + that.indexSwiperListLength) % (that.indexSwiperListLength);
                if (realIndex == 0) {
                  that.$refs.bankVideo.play();//播放
                } else {
                  that.$refs.bankVideo.pause();//暂停
                }
              },
            },
          });
        }
      }
    }
</script>

<style scoped>
  .swiper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    line-height: .9;
  }
  .swiper-slide img {
    width: 100%;
  }
  .bank_video{
    width:100%;
    -o-object-fit:fill;
    object-fit:fill;
    background:#000;
    position:absolute;
    top:0;
    left:0;
    z-index:1
  }
  .swiper-wrapper::-webkit-scrollbar{
    display: none!important;
  }
</style>
